<template>
  <div v-if="PlayingMusicURL" class="px-9 md:px-11">
    <!-- 列出所有连接（列出每个连接的头像） -->
    <div class="rounded-md shadow-sm hover:shadow-md ring-1 ring-gray-200 ring-inset bg-white p-4">
      <p class="text-gray-600 font-bold text-lg flex items-center">
        <Album class="mr-1" /> 最近在听：
      </p>
      <div class="flex items-center gap-4 my-1">
        <button
          @click="togglePlay"
          class="w-8 h-8 flex items-center justify-center rounded-full bg-red-100 shadow-sm hover:bg-red-200 text-white transition"
        >
          <span v-if="!isPlaying">
            <Play class="w-5 h-5" :color="'#ee5b5bd9'" />
          </span>
          <span v-else>
            <Pause class="w-6 h-6" :color="'#ee5b5bd9'" />
          </span>
        </button>

        <!-- 提示 -->
        <div v-if="isPlaying" class="text-stone-500">播放中...</div>
        <div v-else class="text-stone-500">暂停中...</div>
      </div>

      <audio
        ref="audioRef"
        :src="url"
        @play="toggleIsPlaying(true)"
        @pause="toggleIsPlaying(false)"
        preload="none"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from '@/stores/editor'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
import { getApiUrl } from '@/service/request/shared'
import Album from '../icons/album.vue'
import Pause from '../icons/pause.vue'
import Play from '../icons/play.vue'

const url = ref<string>(`${getApiUrl()}/playmusic?t=${Date.now()}`)
const isPlaying = ref<boolean>(false)
const audioRef = ref<HTMLAudioElement | null>(null)
const editorStore = useEditorStore()
const { PlayingMusicURL, ShouldLoadMusic } = storeToRefs(editorStore)

watch(ShouldLoadMusic, (newVal) => {
  if (newVal && audioRef.value) {
    url.value = `${getApiUrl()}/playmusic?t=${Date.now()}` // 添加时间戳，绕过缓存
    // 强制重新加载音频
    if (isPlaying.value) {
      audioRef.value.pause()
      isPlaying.value = false
    }
    audioRef.value.load()
    audioRef.value.pause()
  }
})

const toggleIsPlaying = (state: boolean) => {
  isPlaying.value = state
}

function togglePlay() {
  if (!audioRef.value) return
  if (isPlaying.value) {
    audioRef.value.pause()
  } else {
    audioRef.value.play()
  }
}
</script>
